<template>
    <div>
        <el-container>
            <el-header class="inside-header">
                <div>
                    <!-- 面包屑 -->
                    <el-breadcrumb separator=">">
                        <el-breadcrumb-item>视频监控</el-breadcrumb-item>
                        <el-breadcrumb-item>视频管理</el-breadcrumb-item>
                        <el-breadcrumb-item class="breadcrumbColor">摄像头配置</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-header>
            <el-main>
                <div class="inside-main-box">
                    <el-row class="inside-main" style="background: #fff;padding-top: 10px;">
                        <el-col :span="6" style="margin-left: 20px;">
                            <el-form-item label="检测点名称" >
                                <el-input v-model="form.monitoring_point_name" size="small" clearable/>
                            </el-form-item>
                        </el-col>

                        <el-col :span="4" style="margin-left: 20px;">
                            <el-button class="sele-but" @click="select" size="small">查询</el-button>
                            <el-button class="empty-but" @click="clear" size="small">重置</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div style="background: #fff;">
                    <el-table :data="tableData" style="width: 100%;">
                        <el-table-column align="center" prop="id" label="序号" width="80px" />
                        <el-table-column align="center" prop="monitoring_point_name" label="检测点名称" />
                        <el-table-column align="center" prop="camera_name" label="摄像头名称" />
                        <el-table-column align="center" prop="video_storage_address" label="视频存储地址" />
                        <el-table-column align="center" prop="video_duration" label="视频时长" />
                        <el-table-column align="center" label="操作" fixed="right">
                            <template #default="item">
                                <el-button link type="primary" size="small" icon="view" @click="lookup(item.row)">查看视频</el-button>
                            </template>
</el-table-column>
</el-table>
<el-pagination style="margin-top: 20%;display: flex;justify-content: flex-end;" v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="1000"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
<!--              <el-button @click="get_xml">get_xml</el-button>-->
</el-main>
</el-container>
<el-dialog center v-model="videoDialog" title="查看视频" width="30%" :before-close="handleClose">
    <video :src="videos" style="width: 100%;height: 200px;" autoplay controls loop muted>

    </video>
    <template #footer>
                <span class="dialog-footer">
                    <el-button @click="videoDialog = false">关闭</el-button>
                </span>
            </template>
</el-dialog>
</div>
</template>

<script setup lang="ts">
    import { reactive,ref,getCurrentInstance, onMounted} from 'vue'
    import {deviceInfo} from "@/api/video";
    const videoDialog = ref(false)
    const name = 'transportIndex'
        // 时间
    const size = ref("default");
    const form = reactive({
        monitoring_point_name: "",
    });
    const tableData = ref([]);
    const videos = ref("");
    // 查询全部接口
    const get_xml = () => {
      console.log("get xml")
      fetch("http://192.168.1.98/ISAPI/Security/sessionLogin/capabilities?username=admin&timeStamp=1678772715070").then(
          (res) => console.log(res)
      )
    };
    const selectAll = () => {
        // deviceInfo("<?xml version: \"1.0\" encoding=\"UTF-8\"?><SessionLogin><userName>admin</userName><password>0e1e9d3e3537fa5d5da72f94e93a7fbc7d4a03614055886e4b3149ea87f6a101</password><sessionID>pkdhr0sms88h4emfdz5m</sessionID><isNeedSessionTag>true</isNeedSessionTag><sessionIDVersion>3</sessionIDVersion></SessionLogin>").then((res) => {
        //     // tableData.value = res.data;
        // });
      // request("http://192.168.1.98/ISAPI/System/deviceInfo","GET",null);
      const file = readFile("http://192.168.1.98/ISAPI/Security/sessionLogin/capabilities?username=admin&timeStamp=1678773617557");
      // const file = readFile("http://192.168.1.98/ISAPI/Security/sessionLogin?timeStamp=1678773617557");
      console.log(file)
    }
    // 通用请求方法
      const request = (url, method, params)=> {
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, false);
        // xhr.overrideMimeType("text/html;charset=utf-8");
        // xhr.setRequestHeader("Upgrade-Insecure-Requests",1);
        // xhr.setRequestHeader("Accept-Encoding","gzip, deflate");
        // xhr.setRequestHeader("Host","192.168.1.98");
        // xhr.setRequestHeader("Accept","text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7");
        // xhr.setRequestHeader("Connection","keep-alive");
        // xhr.setRequestHeader("Cookie","language=zh; theme=black; version=-1; authenticationMode=private; needResetInitPassword=false; timeOutLimitEnabled=true; timeOutLimit=900; ITCMenu=config%2Fsystem%2Fsetting; ITCTab=config%2Fsystem%2Fsetting%2FsettingBasic; WebSession=8oq2a50xwe9ni242nmpa");
        xhr.send(null);
        xhr.responseText.replace(/\s*/g,"")
        xhr.onreadystatechange=function(){
          if(xhr.readyState===4){

          }
        }

        xhr.responseType = "blob";
        xhr.onload = function() {
          const blob = this.response;

        }
    };
    const readFile = (filePath: string) => {
      let xhr;
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
      } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
      }
      const okStatus = document.location.protocol === 'file' ? 0 : 200

      xhr.open('POST', filePath, false)
      xhr.overrideMimeType('application/msword')
      // xhr.setRequestHeader("Authorization",'Digest username="admin", realm="DS-TCG205-E", nonce="4e44597a52546446525455365a5441315a6a41344e6d553d", uri="/ISAPI/System/DeviceLanguage/capabilities", algorithm=MD5, response="5522648e0da78fbc7655c4c62cd6c644", qop=auth, nc=00000003, cnonce="175779ed80397197"');
      // xhr.setRequestHeader("Upgrade-Insecure-Requests",1);
      // xhr.setRequestHeader("If-Modified-Since",0);
      // xhr.setRequestHeader("Accept-Encoding","gzip, deflate");
      // xhr.setRequestHeader("SessionTag","hbe3z223v07r31k1rn50l999k662ca8l4jhqf9ed1jw9hqgm1ade94609cryrbt8");
      // xhr.setRequestHeader("Host","192.168.1.98");
      // xhr.setRequestHeader("Referer","http://192.168.1.98/doc/page/login.asp?_1678772737325&page=preview");
      // xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");
      // xhr.setRequestHeader("Accept","*/*");
      // xhr.setRequestHeader("Connection","keep-alive");
      // xhr.setRequestHeader("Cookie","language=zh; theme=black; version=-1; authenticationMode=private; needResetInitPassword=false; timeOutLimitEnabled=true; timeOutLimit=900; ITCMenu=config%2Fsystem%2Fsetting; ITCTab=config%2Fsystem%2Fsetting%2FsettingBasic; WebSession=8oq2a50xwe9ni242nmpa");
      // xhr.setRequestHeader("Cookie","language=zh; theme=black; version=-1; authenticationMode=private; needResetInitPassword=false; timeOutLimitEnabled=true; timeOutLimit=900");
      xhr.send(null)
      return xhr.status === okStatus ? xhr.responseText : null
    }
        // 搜索接口
    const select = () => {
      deviceInfo({}).then((res) => {
              tableData.value = res.data;
          })
        }
    const lookup = (row) =>{
      let index = row.id%3
      videoDialog.value = true;
    }
        // 重置
    const clear = () => {
        form.monitoring_point_name = "",
        selectAll()
    }
    onMounted(() => {
      // const {that} = getCurrentInstance();
      selectAll();
    });
</script>
<style scoped>
    /* 面包屑字体颜色更改 */

    .breadcrumbColor>>>.el-breadcrumb__inner {
        color: #000;
    }
    /* 内部header */

    .inside-header {
        height: 10px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    /* 空心按钮样式 */

    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    /* 实心按钮背景样式 */

    .sele-but {
        background: #3780b9;
        border: 0px;
        border-radius: 2px;
        color: white;
    }

    .add-but {
        background: #dde5fe;
        color: #3780b9;
    }
    /* 分页 */

    .demo-pagination-block {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>
